<template>
  <view class="login-container">
    <!-- 背景装饰 -->
    <view class="bg-decoration"></view>
    
    <!-- 登录卡片 -->
    <view class="login-card">
      <!-- Logo 区域 -->
      <view class="logo-area">
        <view class="logo-icon">
          <text class="iconfont icon-user-circle"></text>
        </view>
        <text class="app-title">冰火泉管理端登录</text>
      </view>
      
      <!-- 表单区域 -->
      <view class="form-area">
        <!-- 用户名输入框 -->
        <view class="input-group">
          <text class="input-icon iconfont icon-user"></text>
          <input 
            type="text" 
            placeholder="请输入用户名" 
            placeholder-class="placeholder" 
            class="input-field"
            v-model="username"
            @focus="onInputFocus('username')"
            @blur="onInputBlur('username')"
          />
        </view>
        
        <!-- 密码输入框 -->
        <view class="input-group">
          <text class="input-icon iconfont icon-lock"></text>
          <input 
            type="password" 
			password='true'
            placeholder="请输入密码" 
            placeholder-class="placeholder" 
            class="input-field"
            v-model="password"
            @focus="onInputFocus('password')"
            @blur="onInputBlur('password')"
          />
        </view>
        
        <!-- 登录按钮 -->
        <button 
          class="login-btn" 
          :class="{ 'active': isFormValid }"
          @tap="onLogin"
        >
          登录
        </button>
      </view>
    </view>
    
    <!-- 底部装饰 -->
    <view class="bottom-decoration"></view>
  </view>
</template>

<script>
	import { request } from '@/utils/request.js'
export default {
  data() {
    return {
      username: '',
      password: '',
      focusedField: null,
      isFormValid: false
    }
  },
  onShow(){
	  console.log(		 uni.getStorageSync("openid"))
  },
  methods: {
    // 输入框聚焦事件
    onInputFocus(field) {
      this.focusedField = field;
    },
    
    // 输入框失焦事件
    onInputBlur(field) {
      this.focusedField = null;
      this.validateForm();
    },
    
    // 表单验证
    validateForm() {
      this.isFormValid = this.username.trim() !== '' && this.password.trim() !== '';
    },
    
    // 登录处理
    onLogin() {
      if (!this.isFormValid) return;
         request({
          url: 'login/login',
          method: 'POST',
          data: { username:this.username,password:this.password,openid:uni.getStorageSync("openid")}
        }).then(res => {
          if (res.status ==200) {
            // token无效，清除并重新登录
             uni.setStorageSync('token', res.data.token)
           	uni.setStorageSync('userInfo', res.data);
			uni.showToast({
			    title: '登录成功',
			    icon: 'none',
			    duration: 2000
			  });
			  setTimeout(()=>{
				  uni.switchTab({
				  	url:"/pages/index/index"
				  })
			  },1500)
          }else{
			  uni.showToast({
			      title: '登录失败',
			      icon: 'none',
			      duration: 2000
			    });
		  }
        }).catch(() => {
          uni.showToast({
              title: '登录失败',
              icon: 'none',
              duration: 2000
            });
        })  
      // // 模拟登录请求
      // uni.showLoading({ title: '登录中...' });
      
      // setTimeout(() => {
      //   uni.hideLoading();
      //   uni.showToast({
      //     title: '登录成功',
      //     icon: 'success',
      //     duration: 2000
      //   });
        
      //   // 登录成功后跳转
      //   setTimeout(() => {
      //     uni.navigateBack({ delta: 1 });
      //   }, 1500);
      // }, 1000);
    },
    
    // 忘记密码
    onForgotPassword() {
      uni.showToast({
        title: '密码重置功能开发中',
        icon: 'none',
        duration: 2000
      });
    },
    
    // 注册处理
    onRegister() {
      uni.showToast({
        title: '注册功能开发中',
        icon: 'none',
        duration: 2000
      });
    }
  },
  
  // 监听数据变化
  watch: {
    username() {
      this.validateForm();
    },
    password() {
      this.validateForm();
    }
  }
}
</script>

<style lang="scss" scoped>
.iconfont {
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.login-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  position: relative;
  overflow: hidden;
  
  .bg-decoration {
    position: absolute;
    top: -100rpx;
    right: -100rpx;
    width: 400rpx;
    height: 400rpx;
    background: rgba(41, 128, 185, 0.1);
    border-radius: 50%;
    z-index: 0;
  }
  
  .bottom-decoration {
    position: absolute;
    bottom: -150rpx;
    left: -150rpx;
    width: 500rpx;
    height: 500rpx;
    background: rgba(41, 128, 185, 0.05);
    border-radius: 50%;
    z-index: 0;
  }
  
  .login-card {
    width: 80%;
    max-width: 700rpx;
    background: #fff;
    border-radius: 20rpx;
    padding: 60rpx 40rpx;
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
    z-index: 1;
    animation: fadeInUp 0.6s ease-out forwards;
    
    @keyframes fadeInUp {
      from {
        opacity: 0;
        transform: translateY(30rpx);
      }
      to {
        opacity: 1;
        transform: translateY(0);
      }
    }
    
    .logo-area {
      display: flex;
      flex-direction: column;
      align-items: center;
      margin-bottom: 80rpx;
      
      .logo-icon {
        width: 120rpx;
        height: 120rpx;
        background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 30rpx;
        box-shadow: 0 5rpx 15rpx rgba(41, 128, 185, 0.3);
        
        .iconfont {
          color: #fff;
          font-size: 60rpx;
        }
      }
      
      .app-title {
        font-size: 44rpx;
        font-weight: bold;
        color: #333;
        letter-spacing: 2rpx;
      }
    }
    
    .form-area {
      .input-group {
        display: flex;
        align-items: center;
        height: 90rpx;
        border-bottom: 2rpx solid #e0e0e0;
        margin-bottom: 50rpx;
        transition: all 0.3s ease;
        
        &:last-child {
          margin-bottom: 30rpx;
        }
        
        .input-icon {
          width: 50rpx;
          text-align: center;
          color: #999;
          font-size: 32rpx;
          margin-right: 20rpx;
          transition: color 0.3s ease;
        }
        
        .input-field {
          flex: 1;
          height: 100%;
          font-size: 32rpx;
          color: #333;
          
          &::placeholder {
            color: #ccc;
          }
        }
      }
      
      // 输入框聚焦效果
      .input-group:focus-within {
        border-bottom-color: #2980b9;
        
        .input-icon {
          color: #2980b9;
        }
      }
      
      .forgot-password {
        text-align: right;
        margin-bottom: 60rpx;
        
        text {
          color: #2980b9;
          font-size: 28rpx;
          cursor: pointer;
          transition: color 0.3s ease;
          
          &:hover {
            color: #1a5276;
          }
        }
      }
      
      .login-btn {
        width: 100%;
        height: 90rpx;
        background: #e0e0e0;
        color: #999;
        border-radius: 50rpx;
        font-size: 34rpx;
        font-weight: 500;
        letter-spacing: 2rpx;
        transition: all 0.3s ease;
        border: none;
        outline: none;
        
        &.active {
          background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
          color: #fff;
          box-shadow: 0 8rpx 20rpx rgba(41, 128, 185, 0.3);
          cursor: pointer;
          
          &:hover {
            background: linear-gradient(135deg, #1a5276 0%, #2980b9 100%);
            box-shadow: 0 10rpx 25rpx rgba(41, 128, 185, 0.4);
          }
        }
      }
      
      .register-option {
        display: flex;
        justify-content: center;
        margin-top: 40rpx;
        
        text {
          color: #666;
          font-size: 30rpx;
        }
        
        .register-link {
          color: #2980b9;
          margin-left: 10rpx;
          cursor: pointer;
          transition: color 0.3s ease;
          
          &:hover {
            color: #1a5276;
          }
        }
      }
    }
  }
}

// 适配不同屏幕尺寸
@media screen and (max-width: 320px) {
  .login-card {
    width: 90%;
    padding: 50rpx 30rpx;
  }
}
</style>
